<template>
  <div class="listOder">
    <section id="header">
      <HeaderPublc></HeaderPublc>
    </section>
    <section id="cent">
      <!--修改-->
      <el-dialog  :visible.sync="dialogVisible" width="600px" >
        <el-form  :model="formData" label-width="130px" :rules="languageData.id=='Chinese'?rules:rules2" ref="formData"   label-position="left" id="formBox2" >

          <el-form-item :label="languageData.public.plalte" prop="containerNumber" >
            <el-input v-model="formData.containerNumber" :placeholder="languageData.public.plalte" ></el-input>
          </el-form-item>
          <!-- 提单号-->
          <el-form-item :label="languageData.public.ladingIdBill" prop="billNumber" >
            <el-input type="textarea"
                      :autosize="{ minRows: 2, maxRows: 8}"
                      v-model="formData.billNumber"
                        v-on:blur="replaceChange(formData.billNumber)" :placeholder="languageData.public.billPlaceholder" ></el-input>

          </el-form-item>
          <!--<el-form-item :label="languageData.public.ladingIdBill" style="text-align: left ;">-->
            <!--<div v-for="(list,index) in formData.billNumber" class="" style="position: relative;padding: 5px 0px">-->
              <!--<div class="left indexNumber" >-->
                <!--{{index + 1}}-->
              <!--</div>-->
              <!--<el-input v-model="formData.billNumber[index]" :disabled="index != formData.billNumber.length-1"  :placeholder="languageData.public.ladingIdBill" @change="rulesCheck(list,index)"></el-input>-->
              <!--<span class="el-icon-circle-close-outline inputIcon" v-show="formData.billNumber.length>1" v-on:click="addOrLadingId('del',index)"></span>-->
            <!--</div>-->
            <!--<p class="err" v-show="errData"  style="color: red;font-size: 12px;line-height: 20px" > {{errData}}</p>-->
            <!--<el-button type="primary"  v-if="formData.billNumber[formData.billNumber.length-1] && !errData[formData.billNumber.length-1]" :disabled="false" size="mini"  v-on:click="addOrLadingId('add')"> {{languageData.public.add}} </el-button>-->
            <!--<el-button type="primary"  v-if="!formData.billNumber[formData.billNumber.length-1] || errData[formData.billNumber.length-1]" :disabled="true" size="mini"  > {{languageData.public.add}} </el-button>-->
          <!--</el-form-item>-->
          <!-- 过境口岸-->
          <el-form-item v-if="listData.transportType != 3" :label="languageData.public.TransitPort" >
            <el-input v-model="formData.transitPort"  :placeholder="languageData.public.TransitPort"></el-input>
          </el-form-item>
          <!-- 箱型-->
          <el-form-item :label="languageData.public.ContainerType" >
            <el-select v-model="formData.cartonType" :placeholder="languageData.public.ContainerType"  style="width: 100%">
              <el-option
                v-for="item in cartonType"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <!-- 集装箱归属-->
          <el-form-item v-if="listData.transportType != 3" :label="languageData.public.ContainerOwner" >
            <el-select v-model="formData.cartonOwner" :placeholder="languageData.public.ContainerOwner"  style="width: 100%">
              <el-option
                v-for="item in cartonOwner"
                :key="item.value"
                :label="languageData.id=='Chinese'?item.label:item.label2"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <!-- 货物名称-->
          <el-form-item  :label="languageData.public.TradeName" >
            <el-input v-model="formData.goodsName"  :placeholder="languageData.public.TradeName"></el-input>
          </el-form-item>
          <!-- HS编码-->
          <el-form-item  :label="languageData.public.HSCode" >
            <el-input v-model="formData.hsCode"  :placeholder="languageData.public.HSCode"></el-input>
          </el-form-item>
          <!-- 车型-->
          <el-form-item v-if="listData.transportType != 3" :label="languageData.public.VeichelType" >
            <el-select v-model="formData.vehicleType" :placeholder="languageData.public.VeichelType"  style="width: 100%">
              <el-option
                v-for="item in careStatus"
                :key="item.value"
                :label="languageData.id=='Chinese'?item.label:item.label2"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <!-- 贸易条款-->
          <el-form-item :label="languageData.public.FreightClause" >
            <el-select v-model="formData.serviceTerm" :placeholder="languageData.public.FreightClause"  style="width: 100%">
              <el-option
                v-for="item in serviceTerm"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <!-- 服务客服名-->
          <el-form-item :label="languageData.public.Customer" >
            <el-input  v-model="formData.customer" :placeholder="languageData.public.Customer"></el-input>
          </el-form-item>
          <!-- 预计到达时间-->
          <el-form-item :label="languageData.public.arriveTime" >
            <div style="text-align: left">
              <el-date-picker
                v-model="formData.estimatedArrivalTime"
                type="date"
                :placeholder="languageData.public.arriveTime"
                :picker-options="pickerOptions0">
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="">
            <div style="text-align: right">
              <!-- 确定--->
              <el-button type="primary" size="medium" round @click="updateDetil('formData')" style="width: 120px">{{languageData.public.done}}</el-button>
              <!-- 取消--->
              <el-button size="medium" round v-on:click="dialogVisible=false"  style="width: 120px">{{languageData.public.cancel}}</el-button>
            </div>
          </el-form-item>

        </el-form>
      </el-dialog>
      <!--更新地点-->
      <el-dialog  :visible.sync="dialogVisible2" width="600px">
        <el-form ref="formData2" :model="formData2" label-width="80px" label-position="right">
          <el-form-item :label="languageData.public.Place">
            <el-input  v-model="formData2.station"  :placeholder="languageData.public.Place"></el-input>
          </el-form-item>
          <!-- 操作状态-->
          <el-form-item :label="languageData.public.doingStatus">
            <div>
              <el-select v-model="formData2.operStatus" :placeholder="languageData.public.doingStatus"  style="width: 100%">
                <el-option
                  v-for="item in operStatus"
                  :key="item.value"
                  :label="languageData.id=='Chinese'?item.label:item.label2"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-form-item>
          <div class="" style="margin-top: 40px;text-align: right">
            <el-button type="primary" size="medium" round  style="width: 120px" @click="addOperFn()">{{languageData.public.done}}</el-button>
            <el-button size="medium" round @click="dialogVisible2 = false" style="width: 120px">{{languageData.public.cancel}}</el-button>
          </div>
        </el-form>
      </el-dialog>
      <!--二次确认  -->
      <el-dialog  :visible.sync="dialogVisible3" width="600px">
        <div>
         {{languageData.id=='Chinese' ? '确定将该订单状态修改为"已完成"? ' : 'Confirm that change the status to "Complete"?' }}
        </div>
        <div class="" style="margin-top: 40px;text-align: center">
          <el-button type="primary" size="medium" round  style="width: 120px" @click="updatStatusFn(listData)">{{languageData.public.done}}</el-button>
          <el-button size="medium" round @click="dialogVisible3 = false" style="width: 120px">{{languageData.public.cancel}}</el-button>
        </div>
      </el-dialog>
      <div class="top">
      </div>
      <div class="center">
        <div class="cardBox clearfix" :DetailData="DetailData"  v-loading="loading" :element-loading-text="languageData.public.loadingText" element-loading-spinner="el-icon-loading" element-loading-background="#f7f7f7">
          <div class="goBack" @click="goBack()"><p class="el-icon-arrow-left"><span style="cursor: pointer">{{languageData.header.back}}</span></p></div>
          <!--地址--->
          <div class="card clearfix"   v-on:click="goChart(listData)">
            <div class=" device  clearfix">
              <div class=" textBox address clearfix">
                <div class="left ctiy" style="text-align: right">{{(languageData.id=='Chinese'?listData.startPosition:listData.startPositionEn) || '----'}}</div>
                <div class="left iconBox">
                  <div class="iocn">
                    <img :src="listData.icon">
                  </div>
                  <div class="l"></div>
                  <p class="go">{{(languageData.id=='Chinese'?listData.transportStatusCn:listData.transportStatusEn) || '---------'}}</p>
                  </div>
                <div class="left ctiy" style="text-align: left">{{(languageData.id=='Chinese'?listData.endPosition:listData.endPositionEn) || '----'}}</div>
                <div class="cleae"></div>
                <div class="text" >
                  <p style="cursor: pointer;text-align: center" @click.stop="gomap(listData)" ><span class="pt"> <i class="el-icon-location"></i>{{languageData.admin.current}}：{{listData.now}}<i class="el-icon-arrow-right"></i></span> </p>
                </div>
              </div>
            </div>
          </div>
          <!--操作状态 station operTime operStatusEN operStatusCN--->
          <div class="card" style="padding: 0px 40px 0px 40px">
            <div class=" device   clearfix">
              <div class=" deviceT" style="padding:15px">
                <div class="" >
                  <p class="cop"><span>{{listData.station ?listData.station:'----'}}</span></p>
                  <!--操作地点--->
                  <p ><span class="imgBox"><img :src="timeImg"/> </span><label>{{languageData.public.Place}}</label></p>
                </div>
              </div>
              <div class=" deviceT" >
                <div class="" style="padding: 15px">
                  <p class="cop">
                    <span v-show="listData.operStatusCN">{{languageData.id=='Chinese'?listData.operStatusCN:listData.operStatusEN}}</span>
                    <span v-show="!listData.operStatusCN">----</span>
                  </p>
                  <p ><span class="imgBox"><img :src="statusImg"/> </span><label>{{languageData.public.doingStatus}}</label></p>
                </div>
              </div>
              <div class=" deviceT" >
                <div class="" style="padding: 15px">
                  <p class="cop"><span>{{listData.operTime?listData.operTime:'----' }}</span></p>
                  <!--操作时间--->
                  <p ><span class="imgBox"><img :src="technicalImg"/> </span><label>{{languageData.public.doingTime}}</label></p>
                </div>
              </div>
              <div class=" " v-show="listData.transportStatus!=1">
                <div class="" >
                  <p style="line-height:60px"><span class="copy" :data-clipboard-text="listData.containerId" @click="dialogVisible2=true">{{languageData.public.update}} </span></p>
                </div>
              </div>
              <div class="cleae"></div>
            </div>
          </div>
          <!--表单--->
          <div class="card">
            <div class=" device   clearfix">
              <div class="textBox deviceT">
                <!--柜号-->
                <div class="td">
                  <p style="position: relative" class="cop"><span>{{listData.containerId}}</span><span class="copy" :data-clipboard-text="listData.containerId" v-on:click="copyFn()"> {{languageData.public.copy}} </span> </p>
                  <p ><label>{{listData.transportType==1?languageData.public.plalteB:languageData.public.plalte}}</label></p>
                </div>
                <!--交通工具-->
                <div class="td">
                  <p class="cop"><span>{{(languageData.id=='Chinese' ? listData.transportTypeText:listData.transportTypeTextEn) || '----'}}</span></p>
                  <p ><label>{{languageData.public.modeOfTransport}}</label></p>
                </div>
                <!--提单号-->
                <div class="td" style="position: relative" >
                  <div class="ladingIdAlert" v-show="show2">
                    <el-collapse-transition>
                      <div v-show="show2" class="transition-box" :class="{'haildn':listData.ladingId.length>5}">
                        <p v-for="(list,index) in listData.ladingId" style="color: #000;font-weight: bold">
                          <span class="margin1"  :class="{'margin': index ==9}">{{index <9?index+1+'.':index+1+'.'}}</span> {{list}}

                        </p>
                      </div>
                    </el-collapse-transition>
                  </div>
                  <p class="cop"><span>{{listData.ladingId[0]?listData.ladingId[0]:'----'}}</span></p>
                  <p >
                    <label>{{languageData.public.ladingIdBill}}</label>
                    <span class="down" :class="{'el-icon-arrow-down':show2,'el-icon-arrow-up':!show2}" @click="show2 = !show2"></span>
                  </p>
                </div>
                <!--定位频率-->
                <div class="td">
                  <p class="cop"><span>{{listData.locateFrequency}}&nbsp{{(languageData.id=='Chinese'?listData.frequencyTypeText.CN:listData.frequencyTypeText.EN) || '----' }}</span></p>
                  <p ><label>{{languageData.public.frequencyGPS}}</label></p>
                </div>
                <!--过境口岸-->
                <div class="td" v-if="listData.transportType != 3">
                  <p class="cop"><span>{{listData.transitPort?listData.transitPort:'----'}}</span></p>
                  <p ><label>{{languageData.public.TransitPort}}</label></p>
                </div>
                <!--设备状态-->
                <!--<div class="td">-->
                  <!--<p class="cop"><span>{{(languageData.id=='Chinese'?listData.deviceOnfftext.CN:listData.deviceOnfftext.EN) || '&#45;&#45;&#45;&#45;' }} </span></p>-->
                  <!--<p ><label>{{languageData.public.deviceStatus}}</label></p>-->
                <!--</div>-->
                <!--完成时间-->
                <div class="td">
                  <p class="cop"><span>{{listData.completeTime?listData.completeTime:'----'}} </span></p>
                  <p ><label>{{languageData.public.completionTime}}</label></p>
                </div>
              </div>
              <div class="textBox deviceT">
                <!--设备号-->
                <div class="td">
                  <p class="cop"><span>{{listData.deviceId?listData.deviceId:'----'}}</span></p>
                  <p ><label>{{languageData.public.container}}</label></p>
                </div>
                <!--运输状态-->
                <div class="td">
                  <p class="cop"><span>{{(languageData.id=='Chinese'?listData.transportStatusCn:listData.transportStatusEn) || '----'}} </span></p>
                  <p ><label>{{languageData.public.status}}</label></p>
                </div>
               <!--集装箱归属-->
                <div class="td" v-if="listData.transportType != 3">
                  <p class="cop">
                    <span  >{{(languageData.id=='Chinese'?listData.cartonOwnerCN:listData.cartonOwnerEN) || '----'}}</span>

                  </p>
                  <p ><label>{{languageData.public.ContainerOwner}}</label></p>
                </div>
                <!--创建时间-->
                <div class="td">
                  <p class="cop"><span>{{listData.ymd?listData.ymd:'----'}} </span></p>
                  <p ><label>{{languageData.public.creaedTime}}</label></p>
                </div>
                <!--箱型-->
                <div class="td">
                  <p class="cop"><span>{{listData.cartonType?listData.cartonType:'----'}} </span></p>
                  <p ><label>{{languageData.public.ContainerType}}</label></p>
                </div>


              </div>
              <div class="textBox deviceT">
                <!--品名-->
                <div class="td">
                  <p class="cop"><span>{{listData.goodsName?listData.goodsName:'----'}}</span></p>
                  <p ><label>{{languageData.public.TradeName}}</label></p>
                </div>
                <!--HS编码-->
                <div class="td">
                  <p class="cop"><span>{{listData.hsCode?listData.hsCode:'----'}}</span></p>
                  <p ><label>{{languageData.public.HSCode}}</label></p>
                </div>
                <!--车型-->
                <div v-if="listData.transportType != 3" class="td">
                  <p class="cop">
                    <span v-show="languageData.id=='Chinese'">{{listData.vehicleTypeCN?listData.vehicleTypeCN:'----'}}</span>
                    <span v-show="languageData.id!='Chinese'">{{listData.vehicleTypeEN?listData.vehicleTypeEN:'----'}}</span>
                  </p>
                  <p ><label>{{languageData.public.VeichelType}}</label></p>
                </div>
                <!--贸易条款-->
                <div class="td">
                  <p class="cop"><span>{{listData.serviceTerm?listData.serviceTerm:'----'}}</span></p>
                  <p ><label>{{languageData.public.FreightClause}}</label></p>
                </div>
                <!--服务客户名-->
                <div class="td">
                  <p class="cop"><span>{{listData.customer?listData.customer:'----'}}</span></p>
                  <p ><label>{{languageData.public.Customer}}</label></p>
                </div>
              </div>
              <div class="textBox deviceT" style="width: 15%" >
                <!--预计到达时间-->
                <div class="td">
                  <p class="cop">
                    <span v-if="listData.transportStatus !=1 && listData.estimatedArrivalTimetext!='已逾期'">{{listData.estimatedArrivalTimetext?listData.estimatedArrivalTimetext:'----'}}</span>
                    <span v-if="listData.transportStatus !=1 && listData.estimatedArrivalTimetext=='已逾期'">
                      {{listData.ArrivalTime||'----'}} ({{listData.estimatedArrivalTimetext}})</span>
                    <span v-if="listData.transportStatus ==1">{{listData.ArrivalTime||'----'}}</span>
                  </p>
                  <p ><label >{{languageData.public.arriveTime}}</label></p>
                </div>
              </div>
              <div class="cleae"></div>
            </div>
            <div style="text-align: right;padding-top: 40px;">
              <!--<el-button round class="bot" :updateStatusData="updateStatusData" v-on:click="del(listData.id)">{{languageData.public.Delete}}</el-button>-->
              <el-button round class="bot" :updateStatusData="updateStatusData" v-show="listData.transportStatus!=1" v-on:click="dialogVisible=true">{{languageData.public.update}}</el-button>
              <el-button round class="okBot" v-show="listData.transportStatus!=1" v-on:click="dialogVisible3 = true">{{languageData.public.completion}}</el-button>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
<style scoped>
  #formBox2{padding-right: 50px}
  .haildn{overflow-y: scroll;width:220px;height: 180px}
  .margin1{color: #999;margin-right: 10px}
  .margin{margin-right: 5px}
  .inputIcon{position: absolute ;top: 13px;right: -50px;font-size: 16px}
  .indexNumber{width: 15px;height: 15px;font-size: 14px;position: absolute;left: -20px;top: 15px;line-height: 15px;text-align: center;color: #adadad}
  .ladingIdAlert{position: absolute;bottom:60px;border: 1px solid #e1e1e1;border-radius:6px;
    width: 200px;background: #fff;left: -40px;max-height: 160px ;overflow: hidden;
    padding: 10px;box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
  .down{border-radius: 10px;border: 1px solid #999;padding: 2px 2px 1px 1px;font-size: 12px;margin-left: 10px}
  .imgBox{margin: 5px 10px 5px 0px;position: relative;top: 3px}
  #cent{background-color: #f7f7f7}
  .cardBox{width:70%;min-width: 900px;max-width:1020px;padding: 40px;margin: auto;position: relative;}
  .card{width:100%;margin-top:20px;background-color: #fff;position: relative;padding: 40px 40px 20px 40px;border-radius: 20px}
  .goBack{ text-align: left}
  .device{margin:auto}
  .device p{ text-align: left;line-height: 34px;}
  .deviceStatus p{font-size: 12px;line-height: 28px;}
  .textBox{padding: 15px;margin: auto;position: relative}
  .deviceT{width:23%;text-align: left; float: left }
  .td{padding-bottom: 20px}
   p{font-size: 14px}
  .cop{font-size: 16px;font-weight: bold;line-height: 25px}
  .address{ padding-left:30px;max-width:600px;min-width: 280px;margin: 0px auto;position: relative}
  .go{font-size: 12px;text-align: right ;text-indent:50px;}
  .ctiy{font-size: 28px;font-weight: bold;width: 36%;}
  .iconBox{width:126px;line-height: 40px;border-bottom: 2px solid #e1e1e1;position: relative;padding-right: 5px;padding-left: 5px;margin: 0px 15px;top: -15px;}
  .iocn{width: 25px;height:25px;background: #e1e1e1;border-radius:16px;  position: absolute;left: 20px;top:5px;}
  .iocn img { width: 100%;height: 100%}
  .l{width: 10px;height: 1px;border-bottom: 2px solid #e1e1e1;transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);position: absolute;right: -2px;bottom:1px;}
  #cent input{ border: 0px none}
  .address .text{padding-top:10px;width: auto;max-width: 600px;}
  .address .text .pt{padding-top: 5px;padding-bottom: 5px;padding-right: 5px;font-size: 14px;line-height: 28px;height: 28px;width: auto}
  .timeDate p{text-align: left;line-height: 40px;font-size: 18px;}
  #cent .timeDate .data{font-size: 18px;}
  .bot{width: 104px;height: 40px;margin-bottom: 20px;border: 1px solid #e5e5e5;background-color:#e5e5e5 }
  .bot:hover{background-color: #409eff;border-color: #409eff;color: #fff}
  .okBot{background-color: #0e72b9; border-color: #0e72b9 ;color: #fff}
  .okBot:hover{background-color: #409eff;border-color: #409eff}
  .copy{padding: 5px 10px;margin-left: 40px; width: 40px;height: 20px;border: 1px solid #0e72bb; text-align: center;font-size: 12px;line-height: 20px;cursor: pointer;font-weight: normal;color: #0e72bb}
   .td .cop .copy{padding: 5px 5px;margin-left: 40px; width: 40px;height: 20px;border: 1px solid #ccc; text-align: center;font-size: 12px;line-height: 20px;cursor: pointer;font-weight: normal;color: #00 0}
  .update{color:#409eff;margin-left: 40px; text-align: center;font-size: 12px;line-height: 20px;cursor: pointer}
  #cent .ladingIdBill{border:1px solid #409eff;width: 150px;height: 25px;padding-left: 5px;}
  @media only screen and (min-width: 300px){
    .center{margin-left:100px;}
  }
  @media only screen and (min-width: 1200px){
    .center{margin:0px auto;}
  }
</style>
<script>
  import HeaderPublc from '../public/herder.vue'
  import Clipboard from 'clipboard'
  import Public from '../../vuex/public.js'
  import jsonListData from '../../../static/stationCode.json'
  import {mapState, mapActions} from 'vuex'
  import ElButton from "../../../node_modules/element-ui/packages/button/src/button.vue";
  import IconCarNor from '../../../static/img/icon/icon_car@2x.png'
  import IconCarSel from '../../../static/img/icon/icon_car_sel.png'
  import IconPlantNor from '../../../static/img/icon/icon_plane@2x.png'
  import IconPlantSel from '../../../static/img/icon/icon_plant_sel.png'
  import IconShipNor from '../../../static/img/icon/icon_ship@2x.png'
  import IconShipSel from '../../../static/img/icon/icon_ship_sel.png'
  import IconTrainNor from '../../../static/img/icon/icon_train@2x.png'
  import IconTrainSel from '../../../static/img/icon/icon_train_sel.png'
  import timeImg from '../../../static/img/time.png'
  import statusImg from '../../../static/img/status.png'
  import technicalImg from '../../../static/img/technical.png'
  export default {
    name: 'my-ChartSon',
    created () {
      // 查看本页面路由 绑定对应页面class
      var usr = sessionStorage.getItem('user');
      this.$store.commit('updateDetail', null)
    },
    data () {
      var ladingIdCheck = (rule, value, callback) => {
        var regEn =/^[0-9a-zA-Z\n]{0,}$/;
        if(regEn.test(value)) {
          callback();
        }else {
          var text = this.languageData.id == 'English'? 'Please input the correct Lading Billing No。':"请填写正确的提单号"
          callback(new Error(text));
        }
      };
      return {
        pickerOptions0: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },
        dialogVisible3:false,
        errData:'',
        show2:false,
        timeImg:timeImg,
        technicalImg:technicalImg,
        statusImg:statusImg,
        dialogVisible2:false,
        rules: {
          containerNumber: [
            {  validator:(rule, value, callback) =>{ var regEn =/^[0-9a-zA-Z#%]{0,}$/ ;if(regEn.test(value)){callback(); }else {callback(new Error('请输入正确的 柜号/车牌号')); }}, trigger: 'blur' }
          ],
          billNumber: [
            { validator:ladingIdCheck, trigger: 'blur' }
          ],
        },
        rules2: {
          containerNumber: [
            {  validator:(rule, value, callback) =>{ var regEn =/^[0-9a-zA-Z#%]{0,}$/ ;if(regEn.test(value)){callback(); }else {callback(new Error('\'Please input the correct Lading Container No./Plate No.')); }}, trigger: 'blur' }
          ],
          billNumber: [
            { validator:ladingIdCheck, trigger: 'blur' }
          ],
        },

        serviceTerm:[{
          value: 'DOOR-DOOR',
          label: 'DOOR-DOOR'
        }, {
          value: 'DOOR-CFS',
          label: 'DOOR-CFS'
        }, {
          value: 'CFS-CFS',
          label: 'CFS-CFS'
        }, {
          value: 'CFS-DOOR',
          label: 'CFS-DOOR'
        }],
        // 0 篷车  1 敞车  2 罐车 3 平板车
        careStatus:[{
          value: 1,
          label: '篷车',
          label2: 'Van'
        }, {
          value: 2,
          label: '敞车',
          label2: 'Gondola car'
        }, {
          value: 3,
          label: '罐车',
          label2: 'Tank Car'
        }, {
          value: 4,
          label: '平板车',
          label2: 'FLAT CAR'
        }],
        //         0 装柜完成  1拖车途中 2进起运站 3国内铁运 4到达中转站 5报关中 6报关放行 7到达口岸 8转关中 9转关放行 10出境等换装 11完成换装 12到达目的站
        // 13清关放行 14送到门点 15装车完成 16国内运输中 17 到达口岸仓库 18出境 19到达目的地海关监管仓
        cartonOwner:[{
          value: 2,
          label: '租箱',
          label2: 'Buy',
        },{
          value: 3,
          label: '买箱',
          label2: 'Rent',
        },{
          value: 1,
          label: '铁路箱',
          label2: 'Railway Container',
        }],
        operStatus:[{
          value: 0,
          label: '装柜完成',
          label2: 'Loading Complete'
        }, {
          value: 1,
          label: '拖车途中',
          label2: 'On the Trailer'
        }, {
          value: 2,
          label: '进起运站',
          label2: 'In Departure Station'
        }, {
          value: 3,
          label: '国内铁运',
          label2: 'On Domestic Railway'
        },{
          value: 4,
          label: '到达中转站',
          label2: 'Arrive Transfer Station'
        },{
          value: 5,
          label: '报关中',
          label2: 'In Declaration'
        }, {
          value: 6,
          label: '报关放行',
          label2: 'Declaration Complete'
        }, {
          value: 7,
          label: '到达口岸',
          label2: 'Arrive Transit Port'
        }, {
          value: 8,
          label: '转关中',
          label2: 'In Transit'
        }, {
          value: 9,
          label: '转关放行',
          label2: 'Transit Complete'
        }, {
          value: 10,
          label: '出境等换装',
          label2: 'Reloading'
        }, {
          value: 11,
          label: '完成换装',
          label2: 'Reloading Complete'
        }, {
          value: 12,
          label: '到达目的站',
          label2: 'Arrive Destination'
        }, {
          value: 13,
          label: '清关放行',
          label2: 'Customer Clearance'
        }, {
          value: 14,
          label: '派送到门点',
          label2: 'Arrive Door'
        },{
          value: 15,
          label: '装车完成',
          label2: 'Loading Trailer Complete'
        }, {
          value: 16,
          label: '国内运输中',
          label2: 'In Domestic Transit'
        }, {
          value: 17,
          label: '到达口岸仓库',
          label2: 'Arrive Port Warehouse'
        },  {
          value: 18,
          label: '出境',
          label2: 'Exit the Country'
        }, {
          value:19,
          label: '到达目的地海关监管仓',
          label2: 'Arrive Customs Supervision Warehouse'
        }],
        // 汽运：装车完成---国内运输中--到达口岸仓库---换装完成--报关中--报关放行--出境--国外运输中--到达目的地海关监管仓--清关放行--派送到门点
        operStatus2:[{
          value: 0,
          label: '装车完成'
        }, {
          value: 1,
          label: '国内运输中'
        }, {
          value: 2,
          label: '到达口岸仓库'
        }, {
          value: 3,
          label: '换装完成'
        }, {
          value: 4,
          label: '报关中'
        }, {
          value: 5,
          label: '报关放行'
        }, {
          value: 6,
          label: '出境'
        }, {
          value: 7,
          label: '到达目的地海关监管仓'
        }, {
          value: 8,
          label: '清关放行'
        }, {
          value: 9,
          label: '派送到门点'
        }],
        cartonType: [{
          value: '20GP',
          label: '20GP'
        }, {
          value: '40GP',
          label: '40GP'
        }, {
          value: '40HQ',
          label: '40HQ'
        }],

        id: null,
        year: null,
        //
        list: [
          {
            id: 'AKDFAKJ2', // 柜号/车牌号
            startPosition: { // 起始地
              country: 'china',
              city: 'Beijing',
              address: 'XXXXX'
            },
            endPosition: { // 目的地
              country: 'china',
              city: 'Beijing',
              address: 'XXXXX'
            },
            transportStatus: 1, // 运输状态
            transportType: 2 // 运输类型
          },
          {
            id: 'AKDFAKJ2',
            startPosition: {
              station: 'china',
              en: 'Beijing',
            },
            endPosition: {
              station: 'china',
              en: 'Beijing',
            },
            transportStatus: 1,
            transportType: 2
          }
        ],
        // 表单
        formData:{
          id:"",
          billNumber:'',
          hsCode:"",//hs编码
          cartonType:"",//箱型
          serviceTerm:"",//服务条款
          customer:"",// 服务客户名
          vehicleType:"",// 车型
          transitPort:"",//过境口岸
          goodsName:"", //品名
          cartonOwner:'',
          containerNumber:''
        },
        formData2:{
          station:'',
          operStatus:0
        },
        // 渲染列表
        listData: {
          id: null,  // 后台唯一id
          containerId: '', // 柜号/车牌号
          ladingId: [''], // 提货号
          deviceId: '', // 设备id
          deviceOnff: 1,
          deviceOnfftext: {EN: '', CN: ''},
          startPosition: '', // 起始地
          endPosition: '', // 目的地
          startPositionEn: '', // 起始地英文
          transportStatus: 0, // 运输状态
          transportStatusCn: '',
          transportStatusEn: '',
          transportType: {EN: '', CN: ''}, // 运输类型
          deviceStatus: 0, // 设备状态
          time: '', // 创建时间
          year: '', // 年
          month: '', // 月
          data: '', // 日
          dateText: '', // 今天/昨天
          transportTypeText: '',
          transportTypeTextEn: '',
          completeTime: null,
          icon: '',
          now: '', // 当前位置
          ymd: '',
          locateFrequency: '',
          frequencyTypeText: {EN: '', CN: ''}
        },
        loading: false,
        ladingIdBillShow: false,
        dialogVisible: false,
        fromData: {
          id: null,
          recyclePosition:{country: null, city: null, address: null},
          transportStatus: 1,
          deviceNumber: null,
          cartonOwner:''
        },
      }
    },
    methods: {
      ...mapActions({
        transportListpost: 'transportListFn',
        updateTansportStatuspost: 'updateTansportStatus',
        delPost: 'deletefn',
        checkID: 'checkId',
        mapListFn: 'mapListFn',
        chart: 'detail',
        updateBillon: 'updateBillon',//订单修改
        addOper:'addOper'
      }),
      // 填写提单号
      replaceChange(str){
        if(str){
          str =  this.replace(str);
        }
        this.formData.billNumber = str;
        // var list =
      },
      // 替换逗号
      replace(str){
        str = str.replace(/，/ig,',');
        console.log(str,'str');
        return str
      },
      //添加提单号
      addOrLadingId (type,index) {
        if(type=='add'){
          if(this.formData.billNumber.length>=10){
            this.errData = '最多10个提单号';
            var that = this;
            setTimeout(function () {
              that.errData = ''
            },1000);
            return
          }else {
            this.errData = '';
            this.formData.billNumber.push('')
          }
        }else if('del'){
          this.formData.billNumber.splice(index,1)
        }
      },
      // 验证提单号
      rulesCheck(str,index){
        var regEn =/^[0-9a-zA-Z#%]{0,}$/;
        this.errData = '';
        if(regEn.test(str)) {
          this.errData = '';
          return this.errData;
        }else {

          this.errData = '提单号不正确';

          return this.errData = '提单号不正确';
        }
      },
      saechList (id) {
        var parm = {
          id: id
        }
        this.chart(parm)
      },
      // 修改状态
      addOperFn(){
        var parm =[this.formData2];
        this.dialogVisible2 = false;
        this.addOper(parm)
      },
      // 查询按钮
      saechFn () {
//        this.loading = true;
//        if(this.input){
//          var parm = {
//            code: this.input
//          }
//          this.checkID(parm)
//        } else {
//          var parm = {id: 1}
////          this.transportListpost(parm)
//        }
      },
      // 列表解析
      listFn (res) {
        var res = res.body.data
        // 重置列表
//        this.listData = {}
        // 提单号 ，运输状态描述，时间解析，今天/明天
        var ladingId, transportTypeText, time, dateText,completeTime
        // 创建时间
        if (res.createTime && res.createTime != -1) {
          time = Public.publicLo.timeCheng(res.createTime)
        } else {
          time = {ymd: '-', hms: '-', times: '-', s: '-', d: '-', m: '-', md: '-', week: '-', y: '-'}
        }
        // 完成时间
        if (res.completeTime && res.completeTime != -1) {
          completeTime = Public.publicLo.timeCheng(res.completeTime)
        } else {
          completeTime = {ymd: '-', hms: '-', times: '-', s: '-', d: '-', m: '-', md: '-', week: '-', y: '-'}
        }
        // 当前时间
        var now = Public.publicLo.dataChange()
        // 匹配当前日期 和当前日期一样 赋值今天
        if ((now.y + now.m) == (time.y + time.m)) { // 匹配当前 年月
          var date1 = parseInt(now.d),
            date2 = parseInt(time.d)
          if (date1 == date2) { // 匹配当前日期
            dateText = '今天'
          } else if ((date1 - date2) == 1) {
            dateText = '昨天'
          }
        }
        // 拼接字符串
        transportTypeText = this.ransportSwitch(res.transportType)

        // 起运地解析地址
        var strdata = Public.publicLo.postCity(res.startPosition)

        var endata = Public.publicLo.postCity(res.endPosition)
        if (!strdata) {
          strdata = {
            cityCN: "NO DAT",
            cityEn: "NO DAT",
            cityPY: "NO DAT",
            citySX: "NO DAT",
            code: "NO DAT",
            countryCN: "NO DAT",
            coutntryEN: "NO DAT",
            id: "NO DAT",
            stationCN: "NO DAT",
            stationEN: "NO DAT",
          }
        }
        if (!endata) {
          endata = {
            cityCN: "NO DAT",
            cityEn: "NO DAT",
            cityPY: "NO DAT",
            citySX: "NO DAT",
            code: "NO DAT",
            countryCN: "NO DAT",
            coutntryEN: "NO DAT",
            id: "NO DAT",
            stationCN: "NO DAT",
            stationEN: "NO DAT",
          }
        }
        // var strdata = this.ctiyChart(res.startPosition)
        // if (res.startPosition.address) {
        //   strdata.address.CN += res.startPosition.address
        //   strdata.address.EN += res.startPosition.address
        // }
        // 目的地解析地址
        // if (res.endPosition.address) {
        //   endata.address.CN += res.endPosition.address
        //   endata.address.EN += res.endPosition.address
        // }
        var deviceOnfftext = {
          CN: '',
          EN: ''
        }
        // if(res.deviceOnff==1){
        //   deviceOnffText = {EN:'Online',CN:'在线'}
        // }
        // if(res.deviceOnff==0){
        //   deviceOnffText = {EN:'Offline',CN:'离线'}
        // }
        // if(res.deviceOnff==2){
        //   deviceOnffText = {EN:'sleep',CN:'休眠'}
        // }
        //  默认状态
        deviceOnfftext = {CN: '异常', EN: 'error'}
        if (res.deviceOnff && res.deviceOnff==1){
          deviceOnfftext =  {EN:'Online',CN:'在线'}
        } else {
          if (res.deviceOnff == 0) {
            deviceOnfftext = {EN:'Offline',CN:'离线'}
          }
          if (res.deviceOnff == 2) {
            deviceOnfftext = {EN:'sleep',CN:'休眠'}
          }
        }
        // 频率文本
        var frequencyTypeText = this.frequencyTypeFn(res.frequencyType)
        if (res.newAddress) {
          if (res.newAddress.length > 10) {
//            res.newAddress = res.newAddress.substring(0,10) + '....'
          }
        } else {
          res.newAddress = '未请求到数据'
          if(this.languageData.id == 'English'){
            res.newAddress = 'No Data'
          }
        }
        var operTime = {ymd: '--', hms: '--', times: '--', s: '--', d: '--', m: '--', md: '--', week: '--', y: '--'},
          transOrderOperResponse = {
            "id":'',
            "orderId":'',
            "operStatus":'',
            "operTime":'',
            "station":''
          }


        if(res.nextOrderOper ){
          transOrderOperResponse = res.nextOrderOper
          operTime =  Public.publicLo.timeCheng( transOrderOperResponse.operTime)
        }
        var estimatedArrivalTime = ""
        res.estimatedArrivalTime = res.estimatedArrivalTime == -1 ? null:res.estimatedArrivalTime
        if(res.estimatedArrivalTime){
          var timeClear = res .estimatedArrivalTime - new Date().getTime()
          if(timeClear<0){
            if(res.transportStatus == 1){ estimatedArrivalTime = '已到达'}else {estimatedArrivalTime = this.languageData.public.ArrivaDelay} //'已逾期'
          }else {
            var x = Public.publicLo.datatmie(timeClear,1000).timeD

            if(x<1){estimatedArrivalTime = this.languageData.public.ArrivaToday }//'今天到达'
            else if(x<2){estimatedArrivalTime = this.languageData.public.ArrivaTomorrow }//'明天到达'
           else if(x>=2){estimatedArrivalTime = this.languageData.id=='Chinese'? x +' 天后到达':"In " + x + ' days' }//'天后到达'
          }
        }
        res.vehicleType = res.vehicleType == -1 ? "" : res.vehicleType;
        res.cartonType = res.cartonType == -1? "" : res.cartonType;
        res.cartonOwner = res.cartonOwner == -1 ? "" :res.cartonOwner;

        var billNumber = '',billNumberDat='',billNumberDat2=['']
        if(res.billNumber){
          billNumberDat =[]
          billNumberDat2 = []
          billNumber = res.billNumber.split(',')
          for (let i in billNumber){
            if(billNumber[i]){
              billNumberDat.push(billNumber[i])
              if(i== billNumber.length-2){
                billNumberDat2  += billNumber[i]
              }else {
                billNumberDat2  += billNumber[i]+'\n'
              }
            }
          }
        }
        var list = {
          id: this.id,  // 后台唯一id
          containerId: res.containerNumber, // 柜号/车牌号
          ladingId: billNumberDat, // 提货号
          deviceId: res.deviceNumber, // 设备id
          deviceOnff: res.deviceOnff,
          deviceOnfftext: deviceOnfftext,
          postCompilt: res.endPosition,
          startPosition: strdata.cityCN, // 起始地
          endPosition: endata.cityCN, // 目的地
          startPositionEn: strdata.cityEn, // 起始地英文
          endPositionEn: endata.cityEn, // 目的地英文
          transportStatus: res.transportStatus, // 运输状态
          transportStatusCn: res.transportStatus == 1 ? '运输完成' : res.transportStatus == 0 ? '运输中' : '异常',
          transportStatusEn: res.transportStatus == 1 ? 'Finished' : res.transportStatus == 0 ? 'In transit' : 'error',
          transportType: res.transportType, // 运输类型
          deviceStatus: 0, // 设备状态
          time: time.hms, // 创建时间
          year: parseInt(time.y), // 年
          month: time.m, // 月
          data: time.d, // 日
          dateText: dateText, // 今天/昨天
          transportTypeText: transportTypeText.type,
          transportTypeTextEn: transportTypeText.typeEn,
          icon: transportTypeText.icon,
          now: res.newAddress, // 当前位置
          ymd: time.ymd + ' ' + time.hms,
          completeTime: completeTime.ymd + ' ' + completeTime.hms,
          locateFrequency: res.locateFrequency,
          frequencyTypeText: frequencyTypeText,
          Responseid:transOrderOperResponse.id || '', // 操作状态id
          operStatus:transOrderOperResponse.operStatus|| '',
          operStatusCN:Public.publicLo.doing(res.transportType,transOrderOperResponse.operStatus).CN,
          operStatusEN:Public.publicLo.doing(res.transportType,transOrderOperResponse.operStatus).EN,
          operTime: (operTime.ymd + ' ' + operTime.hms),//操作时间
          station:transOrderOperResponse.station,//备注
          hsCode:res.hsCode,//hs编码
          cartonType:res.cartonType,//箱型
          serviceTerm:res.serviceTerm,//服务条款
          customer:res.customer,// 服务客户名
          vehicleType:res.vehicleType== -1?'':res.vehicleType,// 车型

          vehicleTypeCN:res.vehicleType==1?'篷车':res.vehicleType==2?' 敞车':res.vehicleType==3?'Tank Car':res.vehicleType==4?'FLAT CAR ':"",
          vehicleTypeEN:res.vehicleType==1?'Van':res.vehicleType==2?' Gondola car':res.vehicleType==3?'罐车':res.vehicleType==4?'平板车 ':"",
          cartonOwnerCN:res.cartonOwner==1?'铁路柜':res.cartonOwner==2?'租柜':res.cartonOwner==3?'买柜':'',
          cartonOwnerEN:res.cartonOwner==1?'Railway Container':res.cartonOwner==2?'Rent':res.cartonOwner==3?'Buy':'',
          cartonOwner:res.cartonOwner == -1 ? "" :res.cartonOwner,
          transitPort:res.transitPort,//过境口岸
          goodsName:res.goodsName, //品名
          estimatedArrivalTimetext:estimatedArrivalTime,
          estimatedArrivalTime:res.estimatedArrivalTime?res.estimatedArrivalTime-86399999:null,
          ArrivalTime:res.estimatedArrivalTime? Public.publicLo.timeCheng(res.estimatedArrivalTime).ymd : ''
        }
        this.listData = list
        // 拼接 表单数据

        this.formData ={
          id:this.listData.id,
          containerNumber :this.listData.containerId,
          billNumber: billNumberDat2,
          hsCode:this.listData.hsCode,//hs编码
          cartonType:this.listData.cartonType,//箱型
          serviceTerm:this.listData.serviceTerm,//服务条款
          customer:this.listData.customer,// 服务客户名
          vehicleType:this.listData.vehicleType,// 车型
          cartonOwner:this.listData.cartonOwner ,//集装箱归属
          transitPort:this.listData.transitPort,//过境口岸
          goodsName:this.listData.goodsName,
          estimatedArrivalTime: this.listData.estimatedArrivalTime
          //品名
        }
        this.formData2={
          orderId: this.id,//订单id
          operStatus:this.listData.operStatus,//需要添加的状态
          station:this.listData.station//站点位置
        }
      },
      // 解析运输方式
      ransportSwitch (data) {
        var transportTypeText;
        switch (data) {
          case 0:
            transportTypeText = {type: '火车', icon: IconTrainNor, typeEn: 'Train'}
            break
          case 1:
            transportTypeText = {type: '汽车', icon: IconCarNor, typeEn: 'Motor'}
            break
          case 3:
            transportTypeText = {type: '轮船', icon: IconShipNor, typeEn: 'Freighter'}
            break
          case 2:
            transportTypeText = {type: '飞机', icon: IconPlantNor, typeEn: 'Flight'}
            break
          default:
            transportTypeText = { type: '异常', icon: IconCarNor }
            break
        }
        return transportTypeText
      },
      // 解析地址
      ctiyChart (data) {
        var str
        // 选择国家
        var country = jsonListData[data.country] || {EN: '', CN: ''}
        if (data.city) {
          str = data.city.split('_')
        }else {
          return {
            country: { EN: country.EN, CN: country.CN },
            city: { EN: '', CN: '' },
            province: { EN: '', CN: '' },
            address: {
              EN: country.EN + ' ',
              CN: country.CN + ' '
            }
          }
        }
        var  province = country[data.country +  '_' + str[1]],
          city = province[str[0] + '_' + str[1] +  '_' + str[2]]
        var address = {
          country: { EN: country.EN, CN: country.CN },
          city: { EN: city.EN, CN: city.CN },
          province: { EN: province.EN, CN: province.CN },
          address: {
            EN: country.EN + ' ' + province.EN + ' ' + city.EN + ' ',
            CN: country.CN + ' ' + province.CN + ' ' + city.CN + ' '
          }
        }
        return address
      },
      // 解析频率
      frequencyTypeFn (str) {
        var data = {EN: '', CN: ''}
        if (str) {
           data.EN = str
           str == 'min' ? data.CN = '分钟' : str == 'hour' ? data.CN = '小时' : str == 'day' ? data.CN = '天' : ''
        }
        return data
      },
      // 运输完成
      updatStatusFn (list) {
        var parm = [{
          id: list.id,
          transportStatus: 1, // 0：运输中 1：运输完成 2：运输异常
          recyclePosition: list.postCompilt,
          deviceNumber: list.deviceId
        }]
        this.dialogVisible3=false
        this.updateTansportStatuspost(parm)
      },
      // 删除运输列表
      del (id) {
        var parm = {
          id: id
        }
        this.delPost(parm)
      },
      // 运输列表操作
      listStatus (res) {
        if(res.status == '20033'){
          var text = this.languageData.id == 'Chinese'?'提单号已存在':' The lading Bill No. already exists.'
          this.openError( res.message + text);
          // 清空 vuex 中的本次记录，以免被下次操作状态造成混淆
          this.$store.commit('updateStatusTo', {body: null})
          return
        }
        if (res.status == 0) {
          // 修改成功
          if(res.code == 'updateBillon'){
            var  text = ''
            if(this.languageData.id == 'Chinese'){
              text = '修改成功'
            }else {
              text = 'Update complete'
            }
            this.openSuccess(text)
            this.saechList(this.id)
          }else {
            text = this.languageData.id=='Chinese'?'订单更新成功': 'Update successfully'
            if(res.code == 'del'){text = this.languageData.id=='Chinese'?'订单删除成功': 'Delete successfully'
              var that = this
              setTimeout(function () {
                that.$router.push({name: 'Histroy'})
              },1000)
            }
            if(res.code == 'up'){text = this.languageData.id=='Chinese'?'订单更新成功': 'Update successfully'
              var that = this
              setTimeout(function () {
                that.$router.push({name: 'Histroy'})
              },1000)
            }
            this.openSuccess(text)
            this.saechList(this.id)
          }
        }else if (res.status == 1) {
          var text = ''
          // 修改成功 修改失败
          text = this.languageData.id=='Chinese'?'订单更新成功': 'Update successfully'
          // 修改成功 修改失败
          this.openSuccess(text)
          this.saechList(this.id)
        }else  {
          this.openError(res.message)
          this.saechList(this.id)
        }
        // 清空 vuex 中的本次记录，以免被下次操作状态造成混淆
        this.$store.commit('updateStatusTo', {body: null})
      },
      // 跳转地图
      gomap (list) {
        // 清空 vuex 列表
        this.$store.commit('addMapList', null)
        this.$store.commit('shechDat', list.deviceId)
        this.$router.push({name: 'map', query: {id: list.id}})
        return false
      },
      goBack () {
        this.$router.go(-1)
      },
      // 查看详情
      goChart (list) {
//        this.$router.push({name: 'chartSon', query: {id: list.id}})
      },
      // 点击修改提单号
      updateBill (id) {
        this.ladingIdBillShow = !this.ladingIdBillShow;
        if (id) {
          var str = this.listData.ladingId;
          var parm = {id: id, ladingId: this.listData.ladingId};
          this.updateBillon(parm)
        } else {
        return
        }
      },
      //修改详情
      updateDetil(formData){

        this.$refs[formData].validate((valid) => {
          if (valid) {
            if(this.errData){
              this.openError('提单号格式不正确');
              return
            }
            var parm ={
              id:this.listData.id,
              containerNumber : this.formData.containerNumber || "",
              hsCode:this.formData.hsCode || "",//hs编码
              cartonType:this.formData.cartonType || "",//箱型
              serviceTerm:this.formData.serviceTerm || "",//服务条款
              customer:this.formData.customer || "",// 服务客户名
              vehicleType:this.formData.vehicleType ? this.formData.vehicleType : -1,// 车型
              cartonOwner:this.formData.cartonOwner? this.formData.cartonOwner : -1,//集装箱归属
              transitPort:this.formData.transitPort || "",//过境口岸
              goodsName:this.formData.goodsName || "",
              estimatedArrivalTime:this.formData.estimatedArrivalTime ? Public.publicLo.dataChange(this.formData.estimatedArrivalTime).time + 86399999 : -1
            }
            if (this.formData.billNumber) {
              var  str  = this.formData.billNumber;
              str = str.replace(/\n/ig,',');
              if(str[str.length-1]==','){
                parm.billNumber = ','+ str;
              }else {
                parm.billNumber = ','+ str +',';
              }
            }else {
              parm.billNumber = '';
            }
            console.log(parm,'parm');
            this.updateBillon(parm);
            this.dialogVisible=false
          } else {
            console.log('error submit!!');
            return false
          }
        })


      },
      openSuccess (text) {
        this.$message({
          message: text,
          type: 'success'
        })
      },
      openError (text) {
        this.$message.error(text)
      },
      // 复制功能
      copyFn (event) {
        const clipboard = new Clipboard('.copy');
        var text = this.languageData.id=='Chinese'?'复制成功':"copy success"
        this.openSuccess(text)
      },
    },
    computed: {
      updateStatusData: function () {
        var parm = this.updateStatus;
        if (parm) {
          this.listStatus(parm)
        }
        return 1
      },
      DetailData: function () {
        var parm = this.Detail;
        if (parm) {
          this.listFn(parm)
        }
        return 1
      },
      languageData: function () {
        var parm = this.language;
        if (parm) {
          if (parm.check == 'Chinese') {
            parm = parm.Chinese
          }
          if (parm.check == 'English') {
            parm = parm.English
//            this.formConfig.labelWidth = '200px'
//            dom.style = 'width:620px'
          }
          // 替换 其他交互数据
//          this.updateDate(parm)
        }
        return parm
      },
      ...mapState([
        'updateStatus',
        'language',
        'Detail'
      ])
    },
    mounted () {
      // 配置顶部菜单
      var parm = {logo: true, login: false, us: true, language: false, user: true, nav: true};
      this.$store.commit('updateNave', parm);
      var id = this.$route.query.id;
      if (id) {
        id = id+'';
        this.saechList(id);
        this.id = id;
      }
    },
    components: {
      ElButton,
      HeaderPublc
    }
  }
</script>

